<template>
    <div class="contion">
        <div class="shoe">
            <van-icon name="arrow-left" size="20" @click="home()" style="margin-top:30px;margin-left:20px"/>
            <h2>全部产品</h2>
        </div>
        <div class="shoe_1">
            <div v-for="(m,n) in shoes" :key="n" class="shoe_1_1">
                <router-link :to="'/detail/?id='+m.id">
                    <img :src="m.image" style="width:150px;height:150px;"> 
                </router-link>
                <span>{{ m.name }}</span>
                <span>{{ m.ca }}</span>
                <van-rate v-model="value" />
                <div class="shoe_2">
                    <span>￥{{ m.price }}</span>
                    <div class="shoe_2_1">
                        <van-icon name="like-o" size="20" @click="addlike(m)"/>
                    </div>
                    <div class="shoe_2_2">
                        <van-icon name="shopping-cart-o" size="20"  @click="addcart(m)"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import Home from "./Home.vue";

const router = useRouter()

const home = () =>{
    router.push('/home')
}

let shoes = ref([])

const getShoes = () =>{
    axios.get("http://127.0.0.1:8000/home/shoe2/").then(res=>{
        shoes.value = res.data
    })
}

const value = ref(4);

const addcart = (m) =>{
    axios.post("http://127.0.0.1:8000/home/cart/",{user:localStorage.getItem('userid'),shoes:m.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/cart')
        }
        else{
            ElMessage.error(res.data.msg)
        }
})
}

const addlike = (m) =>{
    axios.post("http://127.0.0.1:8000/home/like/",{user:localStorage.getItem('userid'),shoes:m.id}).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            router.push('/like')
        }
        else{
            ElMessage.error(res.data.msg)
        }
    })
}

onMounted(()=>{
    getShoes()
})
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.shoe{
    display: flex;
    flex-direction: row;
    width: 600px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #fff;
}

.shoe h2{
    margin-left: 200px;
}

.shoe_1{
    width: 600px;
    flex-wrap: wrap;
    grid-template-columns: repeat(2, 1fr); /* 根据需要调整列数 */
    display: grid;
    gap: 10px;
    margin-top: 20px;
    
}

.shoe_1_1{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    margin-left: 50px;
}

.shoe_2{
    display: flex;
    flex-direction:row;
}

.shoe_2_1{
    margin-left: 40px;
    margin-right: 5px;
    padding: 5px;
    border-radius: 5px;
    background-color:#9F9E9A1A;
    color: darkgray;
}

.shoe_2_2{
    padding: 5px;
    background-color: #E44F32;
    border-radius: 5px;
    color: #FFFFFF;
}
</style>